import Taro from "@tarojs/taro";
import {View, Text} from "@tarojs/components";
import "./me.less";
import Api from "../../api/api";
import {getGlobal, setGlobal, checkLogin} from "../../api/globalData";

import defaultAvatarUrl from "../../assets/image/app.png";
import bookImg from "../../assets/image/book.png";
import subjectImg from "../../assets/image/subject.png";
import rightImg from "../../assets/image/right.png";
import NavBar from "../../commponents/nav-bar/nav-bar";

export default class Me extends Taro.Component {
  constructor() {
    super(...arguments);

    this.state = {
      userInfo: null
    };
    Taro.eventCenter.on("userInfoEvent", res => {
      console.log("userInfoEvent", res);
      this.setState({userInfo: res});
    });
  }

  canIUse = Taro.canIUse("button.open-type.getUserInfo");

  async componentWillMount() {
    const userInfo = getGlobal("userInfo");
    if (userInfo) {
      this.setState({userInfo: userInfo});
    } else if (!this.canIUse) {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      let res = await Trao.getUserInfo();
      if (res.userInfo) {
        setGlobal("userInfo", res.userInfo);
        this.setState({userInfo: res.userInfo});
      }
    }
  }

  async applyLogin(e) {
    this.saveUser(e.detail.userInfo);
  }

  toReadRecords() {
    if (!checkLogin()) {
      return;
    }
    Taro.navigateTo({
      url: `/pages/read-record/read-record`
    });
  }

  toMySubject() {
    if (!checkLogin()) {
      return;
    }
    Taro.navigateTo({
      url: `/pages/my-collect/my-collect`
    });
  }

  // req 就是userInfo
  async saveUser(req) {
    req.openId = getGlobal("openId");
    let {data} = await Api.login(req);
    if (data.success) {
      await Taro.setStorageSync("userInfo", data.data);
      setGlobal("userInfo", data.data);
      this.setState({
        userInfo: data.data
      });
    }
  }

  render() {
    return (
      <View>
        <NavBar title="我的" showBox={false}/>
        <View className="m-container">
          <View className="my-container">
            {userInfo ? (
              <Block>
                <View className="my-img">
                  <image
                    src={
                      userInfo.avatarUrl ? userInfo.avatarUrl : defaultAvatarUrl
                    }
                    mode="aspectFit"
                  />
                </View>
                <View className="my-info">
                  <p>{userInfo.nickName}</p>
                </View>
              </Block>
            ) : (
              <View className="login-btn">
                <Button
                  type="primary"
                  onGetuserinfo={this.applyLogin.bind(this)}
                  open-type="getUserInfo"
                >
                  微信登录
                </Button>
              </View>
            )}
          </View>
          <View className="detail-container">
            <View
              className="detail-list"
              hover-class="btn-view-hover"
              onTap={this.toReadRecords.bind(this)}
            >
              <View className="detail-icon">
                <Image src={bookImg}/>
              </View>
              <View className="deatil-contain">
                <View className="detail-name">阅读过的文章</View>
                <View className="detail-right">
                  <Image src={rightImg} mode="aspectFit"/>
                </View>
              </View>
            </View>
            <View
              className="detail-list"
              hover-class="btn-view-hover"
              onTap={this.toMySubject.bind(this)}
            >
              <View className="detail-icon">
                <Image src={subjectImg}/>
              </View>
              <View className="deatil-contain">
                <View className="detail-name">我的收藏</View>
                <View className="detail-right">
                  <Image src={rightImg} mode="aspectFit"/>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
